<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OnlineApp.NET 2018 Template</title>
<meta name="description" content="Source code generated using layoutit.com">
<meta name="author" content="LayoutIt!">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="navbar-toggler-icon"></span>
</button> <a class="navbar-brand" href="#">ONLINEAPP.NET</a>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Link <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Dropdown link</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider">
</div> <a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-md-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Hi!! Pawan Sachitha <span class="sr-only">(current)</span></a>
</li>
<li>
<a>
<span style="cursor:pointer" onclick="openNav()">
<i class="fas fa-user-circle fa-w-16 fa-2x icon-color"></i>
</span>
</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container-fluid">
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="row">
<div class="col-sm-12 col-md-12 user-details">
<div class="user-image">
<img src="data:image/jpeg;base64,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" alt="Pawan Sachitha" title="Pawan Sachitha" class="rounded-circle">
</div>
<div class="user-info-block">
<div class="user-heading">
<h3>Pawan Sachitha</h3>
<span class="help-block">Colombo, IN</span>
</div>
<br />
<ul class="navigation"></ul>
<div class="user-body">
<div class="tab-content">
<div id="information" class="tab-pane active">
<a href="#"><h5>Sign-Out</h5></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sidebar left">
<ul class="list-sidebar bg-defoult">
<li>
<a href="#" data-toggle="collapse" data-target="#dashboard" class="collapsed active">
<i class="fa fa-th-large"></i>
<span class="nav-label"> </span>
</a>
</li>
<li>
<a href="#" data-toggle="collapse" data-target="#dashboard" class="collapsed active">
<i class="fas fa-chart-line"></i>
<span class="nav-label"> </span>
</a>
</li>
<li>
<a href="#" data-toggle="collapse" data-target="#dashboard" class="collapsed active">
<i class="fas fa-users"></i> <span class="nav-label"> </span>
</a>
</li>
<li>
<a href="#" data-toggle="collapse" data-target="#dashboard" class="collapsed active">
<i class="fab fa-accusoft"></i>
<span class="nav-label"> </span>
</a>
</li>
</ul>
</div>
<div class="contan-body">
<div class="col-12">
<!-- Main Content -->
<div class="side-body">
<h1> Main Content here </h1>
<pre> Resize the screen to view the left slide menu </pre>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
.icon-color {
color: #ffffff;
}
/*User Profile*/
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 10000000000000;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
@media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
a {
color: #0488ae;
text-decoration: none;
}
.user-details {
position: relative;
padding: 0;
}
.user-details .user-image {
position: relative;
z-index: 1;
width: 100%;
text-align: center;
}
.user-image img {
clear: both;
margin: auto;
position: relative;
}
.user-details .user-info-block {
width: 100%;
position: absolute;
top: 72%;
/*background: rgb(255, 255, 255);
*/
z-index: 0;
padding-top: 35px;
color: white;
}
.user-info-block .user-heading {
width: 100%;
text-align: center;
margin: 20px 0 0;
}
.user-info-block .navigation {
float: left;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
border-bottom: 1px solid #17800c;
border-top: 1px solid #17800c;
}
.navigation li {
float: left;
margin: 0;
padding: 0;
}
.navigation li a {
padding: 20px 30px;
float: left;
}
.navigation li.active a {
background: #428BCA;
color: #fff;
}
.user-info-block .user-body {
float: left;
padding: 5%;
width: 90%;
}
.user-body .tab-content > div {
float: left;
width: 100%;
}
.user-body .tab-content h4 {
width: 100%;
margin: 10px 0;
color: #333;
}
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
}
html, body {
width: 100%;
height: 100%;
}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
display: block;
}
audio, canvas, progress, video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
a {
background-color: transparent;
text-decoration: none;
}
a:active, a:hover {
outline: 0;
}
h1, h2, h3, h4, h5, h6, p, ul, ol {
margin: 0px;
padding: 0px;
}
/*********************** TOP Bar ********************/
.sidebar {
position: absolute;
width: 45px;
height: 1500px;
background-color: #000;
transition: all 0.5s ease-in-out;
}
.bg-defoult {
background-color: #222;
}
.sidebar ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.sidebar li a, .sidebar li a.collapsed.active {
display: block;
padding: 8px 12px;
color: #fff;
border-left: 0px solid #dedede;
text-decoration: none;
}
.sidebar li a.active {
background-color: #000;
border-left: 5px solid #dedede;
transition: all 0.5s ease-in-out;
}
.sidebar li a:hover {
background-color: #000 !important;
}
.sidebar li a i {
padding-right: 5px;
}
.sidebar ul li .sub-menu li a {
position: relative;
}
.sidebar ul li .sub-menu li a:before {
font-family: FontAwesome;
content: "\f105";
display: inline-block;
padding-left: 0px;
padding-right: 10px;
vertical-align: middle;
}
.sidebar ul li .sub-menu li a:hover:after {
content: "";
position: absolute;
left: -5px;
top: 0;
width: 5px;
background-color: #111;
height: 100%;
}
.sidebar ul li .sub-menu li a:hover {
background-color: #222;
padding-left: 20px;
transition: all 0.5s ease-in-out;
}
.sub-menu {
border-left: 5px solid #dedede;
}
.sidebar li a .nav-label, .sidebar li a .nav-label + span {
transition: all 0.5s ease-in-out;
}
.sidebar.fliph li a .nav-label, .sidebar.fliph li a .nav-label + span {
display: none;
transition: all 0.5s ease-in-out;
}
.sidebar.fliph {
width: 42px;
transition: all 0.5s ease-in-out;
}
.sidebar.fliph li {
position: relative;
}
.sidebar.fliph .sub-menu {
position: absolute;
left: 39px;
top: 0;
background-color: #222;
width: 150px;
z-index: 100;
}
.bg-faded {
background-color: #17800c;
}
.navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.open, .navbar-light .navbar-nav .open > .nav-link {
color: #ffffff;
}
.navbar-light .navbar-nav .nav-link {
color: #ffffff;
}
.navbar-light .navbar-brand, .navbar-light .navbar-toggler {
color: #ffffff;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
color: #ffffff;
}
.container-fluid {
padding-right: 0px;
padding-left: 0px;
}
.contan-body {
padding: 2% 5%;
}
@media (max-width: 650px) {
.contan-body {
padding: 2% 12%;
}
}
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
function openNav() {
document.getElementById("mySidenav").style.width = "310px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
